import React, { useReducer } from 'react'
import { Switch, Route, Redirect } from "react-router-dom"
import Login from "./pages/login/Login"
import Register from "./pages/register/Register"
import index from "./pages/index/index"
import Detail from "./pages/detail/Detail"
import search from "./pages/search/search"
import { initState, reducer } from './reducer/app'

// 创建上下文
export const MyContext = React.createContext()

const App = () => {
  const [state, dispatch] = useReducer(reducer, initState)

  return (
    <div className='app'>
      {/* 传递数据 */}
      <MyContext.Provider value={{state,dispatch}}>
        {/*Switch: 路由视图 */}
        <Switch>
          {/* Route: 路由规则 */}
          <Route path="/login" component={Login}></Route>
          <Route path="/register" component={Register}></Route>
          <Route path="/index" component={index}></Route>
          <Route path="/detail/:id" component={Detail}></Route>
          <Route path="/search" component={search}></Route>
          {/*Redirect 重定向 */}
          <Redirect to="/login"></Redirect>
        </Switch>
      </MyContext.Provider>
    </div>
  )
}



export default App;